<template>

    <div class="tou">
 
     <div class="tou1"><span>当前审批中</span><span>本月审批通过</span><span>本月审批驳回</span></div>
     <div class="tou2"><p>{{ object.currApproveCount }}</p><p>{{ object.approveCount }}</p><p>{{ object.rejectionCount }}</p></div>
     
 
 
    </div>
    
 
     <el-table ref="multipleTableRef" :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
         <el-table-column type="selection" width="55" />
         <el-table-column label="序号" property="processId" width="150">
             <!-- <template #default="scope">{{ scope.row.date }}</template> -->
         </el-table-column>
         <el-table-column property="processName" label="审批类型" width="150" />
         <el-table-column property="username" label="申请人" width="150" />
         <el-table-column property="procCurrNodeUserName" label="当前申请人" width="150" />
         <el-table-column property="procApplyTime" label="审批发起时间" width="200" />
         <!-- <el-table-column property="processState" label="审批状态" width="150" /> -->
 
         <!-- <el-table-column property="processState=='0'?'已提交':processState=='1'?'审批中':processState=='2'?'审批通过':processState=='3'?'审批不通过':"label="审批状态" width="150" /> -->
 
         <el-table-column  label="审批状态" width="150" >
          <template #default="scope">
          <el-tag v-if="scope.row.processState == 0">已提交</el-tag>
          <el-tag v-if="scope.row.processState == 1">审批中</el-tag>
          <el-tag v-if="scope.row.processState == 2">审批通过</el-tag>
          <el-tag v-if="scope.row.processState == 3">审批不通过</el-tag>
          <el-tag v-if="scope.row.processState == 4">撤销</el-tag>
         </template>
         </el-table-column>
 
 
 
 
         <el-table-column property="" label="操作" width="150">
             <template #default="scope">
                 <el-button size="small" @click="jump(scope.row)">
                     查看
                 </el-button>
             </template>
 
             <!-- <el-button type="primary" @click="jump()">查看</el-button> -->
         </el-table-column>
     </el-table>
 
 </template>
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
 import { ElTable } from 'element-plus'
 // import serviceAxios from 'axios';
 import { getReports } from '../axios/user'
 import router from '@/router';
 
 onMounted(() => {
     getUser()
 
 
 })
 
 const multipleTableRef = ref<InstanceType<typeof ElTable>>()
 const multipleSelection = ref<User[]>([])
 
 const handleSelectionChange = (val: any[]) => {
     multipleSelection.value = val
 }
 
 const tableData = ref([])
 
 let page = ref(1)
 let pageSize = ref(10)
 
 const object = ref([])
 
 
 const getUser = async () => {
     let date = 20201
     await getReports(page.value, pageSize.value).then((res) => {
         console.log(res.data.data.rows)
         tableData.value = res.data.data.rows
         object.value = res.data.data
         console.log(object.value);
     })
 }
 
 const jump = (i: any) => {
     console.log(i.userId);
     router.push(`/Shendetail?id=${i.userId}`)
     // router.push('/Shendetail')
 }
 
 </script>
 <style  scoped>
 .tou{
     width:1200px;
     height:135px;
     background:#f5f5f5;
 }
 .tou1 span{
     float:left;
     margin-left:20px;
     font-size:20px;
     margin-top:35px;
 }
 .tou2 p{
     float:left;
     margin-left:130px;
     font-size:20px;
     margin-top:70px;
 }
 .tou2{
     float:left; 
     margin-left:-480px; 
 }
 </style>